<template>

  <baidu-map :style="{width:map.width,height:map.height}" class="map" ak="这里填你的百度秘钥" :zoom="map.zoom" :center="{lng: map.center.lng, lat: map.center.lat}" @ready="handler" :scroll-wheel-zoom="true">
      <!--比例尺控件-->
      <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
      <!--缩放控件-->
      <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" ></bm-navigation>
      <!--聚合动态添加的点坐标-->
      <bm-marker-clusterer :averageCenter="true">
          <bm-marker v-for="marker of markers" :key="marker.code" :position="{lng: marker.lng, lat: marker.lat}" @click="lookDetail(marker)"></bm-marker>
      </bm-marker-clusterer>
      <!--信息窗体-->
      <bm-info-window :position="{lng: infoWindow.info.lng, lat: infoWindow.info.lat}" :title="infoWindow.info.name" :show="infoWindow.show" @close="infoWindowClose" @open="infoWindowOpen">
          <p><span class="left">单位面积能耗：</span><span class="right">{{infoWindow.info.areaEnergy}}kWh/㎡</span></p>
          <p><span class="left">建筑面积：</span><span class="right">{{infoWindow.info.area}}㎡</span></p>
          <p><span class="left">电耗：</span><span class="right">{{infoWindow.info.energy}}kWh</span></p>
          <p><span class="left">水耗：</span><span class="right">{{infoWindow.info.water}}m³</span></p>
          <p><span class="left">气耗：</span><span class="right">{{infoWindow.info.air}}m³</span></p>
      </bm-info-window>
  </baidu-map>

</template>
<script>
    //百度地图
    import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
    import BmScale from 'vue-baidu-map/components/controls/Scale'
    import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
    import BmMarkerClusterer from  'vue-baidu-map/components/extra/MarkerClusterer'
    import BmMarker from 'vue-baidu-map/components/overlays/Marker'
    import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'

    export default {
        name: "pm-distribution",
        components: {
            BaiduMap,
            BmScale,
            BmNavigation,
            BmMarkerClusterer,
            BmMarker,
            BmInfoWindow
        },
        data() {
            return {
                districtType: 0,//行政区域
                districtTypeOptions:{},//行政区域选项
                buildType: 0,//项目类型
                buildTypeOptions: {},//项目类型选项
                buildId: '',//项目ID
                buildOptions: {}, //项目列表
                searchParams:{
                    regions:0,//区域编号
                    proType:0,//项目类型
                    proCode:'',//项目编号
                },
                map:{
                    center: {lng: 118.802422,lat:32.065631},//'南京市',
                    zoom: 12,
                    width:'1000px',
                    height:'710px'
                },
                markers:[],
                infoWindow: {
                    lng: 0,
                    lat: 0,
                    show: false,
                    info:{
                        air: 0,
                        area: 12313,
                        areaEnergy: 0.64,
                        code: "440300A055",
                        energy: 7922.66,
                        lat: "32.043433",
                        lng: "118.784107",
                        name: "市人民检察院",
                        water: 0
                    },
                },
                activeName: '',
                leftHeight:'540px',
                containerHeight:'700px'
            }
        },
        created() {
            this.districtTypeOptions[0].label = '请选择行政区域';
            this.getBuildTypes();
            this.getSelectPro();
        },
        mounted() {
            this.leftHeight=document.body.clientHeight-300+'px';
            this.containerHeight=document.body.clientHeight-150+'px';
        },
        methods: {
            //查询
            search() {
                this.searchParams.regions=this.districtType;
                this.searchParams.proType=this.buildType;
                this.searchParams.proCode=this.buildId;
                this.getProPositionMap();
            },
            infoWindowClose () {
                this.infoWindow.show = false
            },
            infoWindowOpen () {
                this.infoWindow.show = true
            },
            //查看详情
            lookDetail(data, target){
                // console.log('data',data)
                this.infoWindow.show =true;
                this.infoWindow.info=data;
                this.activeName = data.name;
                // let This=this;
                //为弹窗口标题添加title
                this.$nextTick(()=>{
                    var win=document.querySelector(".BMap_bubble_title");
                    win.title = this.activeName;
                })
                if(target=='left'){ //点击的是左侧列表项，则不需要滚动
                    this.map.center={lng: data.lng, lat: data.lat};
                    this.map.zoom = 15;
                    return;
                }
                //滚动到指定元素位置
                this.$nextTick(()=>{
                    var obj=document.querySelector(".active");
                    var scrollTop=obj.offsetTop;
                    this.$refs.box.scrollTop=scrollTop-180;
                })
            },
            //地图初始化
            handler ({BMap, map}) {
                console.log(BMap, map)
                // this.map.center.lng = 118.802422
                // this.map.center.lat = 32.065631
                // this.map.zoom = 12;
                this.map.width= document.getElementById("container").clientWidth-330+'px';
                this.map.height=document.body.clientHeight -160+'px';
                this.getProPositionMap();
            },
            //获取项目列表
            getSelectPro(){
            },
            //项目分布地图
            getProPositionMap(){
            },
            //获取项目类型
            getBuildTypes() {
            },
        }
    }
</script>